<html>
<head>
	<title>XMLHttpRequest</title>
</head>
<body style="font-family:consolas;">
	<form onSubmit="doNewRequest();">
	<br />
	<input type="text" name="method" id="method" value="PROPFIND" /><input type="text" name="addr" style="width: 50%" id="addr" value="/" />
	</form>
	Headers (name: value)
	<textarea id="inputHeaders" style="width: 90%; height: 50px;"></textarea>
	<br/>
	RequestBody<br/>
	<textarea id="input" style="width: 90%; height: 100px;"></textarea>
	<br />
<button onClick="doNewRequest();" value="XHR">XHR</button>
	<br /><br/>
	Response<br />
	<textarea id="output" style="width: 90%; height: 400px;"></textarea>
	<br />
	<button onclick="clearOutput()">
		Clear output</button>
</body>
<script type="text/javascript">
	var req;
	var output = document.getElementById("output");

	function clearOutput() {
		output.innerHTML = "";
	}
	function processReqChange() {
		if (req.readyState == 4) {
			try {
			output.innerHTML = req.responseText;
			} catch(err) {
			output.innerText = req.responseText;
			}
		}
	}
	function doNewRequest() {
		req = new XMLHttpRequest();
		output.innerHTML = "working...";
		req.onreadystatechange = processReqChange;
		req.open(document.getElementById("method").value, document.getElementById("addr").value, true);

		if (document.getElementById("inputHeaders").value) {
			var entries = document.getElementById("inputHeaders").value.replace("\r","").split("\n");
			for (var i=0;i < entries.length;i++) {
				req.setRequestHeader(entries[i].substring(0,entries[i].indexOf(':')), entries[i].substring(entries[i].indexOf(':') + 2));
			}
		}

		req.send(document.getElementById("input").value);
		return false;
	}

</script>
</html>
